<template>
  <div>
    <ul class="ul">
      <li v-for="(b, i) in arr" :key="i" @click="wan(b)">
        <div class="box">
          <img :src="b.room_src" alt="" />
          <p class="p">{{ b.nickname }}</p>
          <p class="p1">{{ fun(b.online) }}</p>
        </div>
        <p class="p2">{{ b.room_name }}</p>
      </li>
    </ul>
  </div>
</template>
<script>

export default {
  data() {
    return {
      arr:[],
      online:"",
    }
  },
  created() {
    let url = "/abc/api/RoomApi/live";
    this.$http.get(url).then((res) => {
      this.arr = res.data.data
      console.log(this.arr);
    });
  },
  methods: {
    wan(a){
      window.location=(a.url)
    },
    fun(num){
      num = Number(num);
      if (num == 0) {
        return num + "";
      }else if (num >1 && num <10000) {
        return num + "";
      }else{
        return (num /10000).toFixed(2) + "万";
      }
    }
  },
}
</script>
<style>
.ul {
  margin: 0 auto;
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ul li {
  width: 250px;
  height: 270px;
}
.box {
  position: relative;
}
.ul li img {
  width: 250px;
  height: 230px;
}
.box .p {
  position: absolute;
  left: 3px;
  bottom: 8px;
  color: #ffffff;
  z-index: 1;
}
.box .p1 {
  position: absolute;
  right: 3px;
  bottom: 8px;
  color: #ffffff;
  z-index: 1;
}
.p2 {
  margin: 0;
  margin-top: 5px;
}
</style>
